{% extends 'base.html' %}
{% load static %}

{% block title %}战斗错误 - {{ battle.id }}{% endblock %}

{% block extra_css %}
<style>
    body {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        min-height: 100vh;
        color: rgba(255, 255, 255, 0.9);
    }

    .error-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 30px;
    }

    .error-header {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.1));
        border: 1px solid rgba(220, 53, 69, 0.3);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        text-align: center;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(220, 53, 69, 0.1);
    }

    .error-icon {
        font-size: 4rem;
        color: #dc3545;
        margin-bottom: 20px;
        animation: errorPulse 2s ease-in-out infinite;
    }

    @keyframes errorPulse {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.7;
            transform: scale(1.05);
        }
    }

    .error-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #dc3545;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .error-subtitle {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 20px;
    }

    .battle-info {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .info-row:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
    }

    .info-value {
        color: rgba(255, 255, 255, 0.7);
    }

    .error-details {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(220, 53, 69, 0.02));
        border: 1px solid rgba(220, 53, 69, 0.2);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        backdrop-filter: blur(10px);
    }

    .error-section {
        margin-bottom: 25px;
    }

    .error-section h4 {
        color: #dc3545;
        font-weight: 600;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .error-content {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(220, 53, 69, 0.2);
        border-radius: 8px;
        padding: 20px;
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.9);
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 300px;
        overflow-y: auto;
    }

    .actions-section {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(100, 150, 255, 0.02));
        border: 1px solid rgba(100, 150, 255, 0.2);
        border-radius: 15px;
        padding: 30px;
        text-align: center;
    }

    .btn-error {
        background: linear-gradient(135deg, #dc3545, #c82333);
        border: 1px solid #dc3545;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        margin: 0 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    }

    .btn-error:hover {
        background: linear-gradient(135deg, #c82333, #a71e2a);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-primary {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: 1px solid #007bff;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        margin: 0 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
        color: white;
        text-decoration: none;
    }

    .breadcrumb-nav {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
        padding: 15px 25px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-link {
        color: #6496ff;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-link:hover {
        color: #00d4ff;
        text-decoration: none;
    }

    .breadcrumb-separator {
        color: rgba(255, 255, 255, 0.5);
        font-weight: bold;
    }

    .current-page {
        color: #dc3545;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: linear-gradient(45deg, #dc3545, #c82333);
        color: white;
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.4);
        animation: errorBlink 1.5s ease-in-out infinite;
    }

    @keyframes errorBlink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }

    .error-detail-item {
        margin-bottom: 15px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .error-detail-item:last-child {
        border-bottom: none;
    }

    .error-type-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .error-type-timeout {
        background: linear-gradient(45deg, #ff9800, #f57c00);
        color: white;
        box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);
    }

    .error-type-syntax_error {
        background: linear-gradient(45deg, #f44336, #d32f2f);
        color: white;
        box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
    }

    .error-type-runtime_error {
        background: linear-gradient(45deg, #e91e63, #c2185b);
        color: white;
        box-shadow: 0 0 15px rgba(233, 30, 99, 0.4);
    }

    .error-type-output_format_error {
        background: linear-gradient(45deg, #9c27b0, #7b1fa2);
        color: white;
        box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
    }

    .error-type-command_format_error {
        background: linear-gradient(45deg, #673ab7, #512da8);
        color: white;
        box-shadow: 0 0 15px rgba(103, 58, 183, 0.4);
    }

    .error-type-compilation_error {
        background: linear-gradient(45deg, #3f51b5, #303f9f);
        color: white;
        box-shadow: 0 0 15px rgba(63, 81, 181, 0.4);
    }

    .error-type-import_error {
        background: linear-gradient(45deg, #2196f3, #1976d2);
        color: white;
        box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
    }

    .error-type-memory_error {
        background: linear-gradient(45deg, #00bcd4, #0097a7);
        color: white;
        box-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
    }

    .error-type-permission_error {
        background: linear-gradient(45deg, #009688, #00695c);
        color: white;
        box-shadow: 0 0 15px rgba(0, 150, 136, 0.4);
    }

    .error-type-unknown_error {
        background: linear-gradient(45deg, #607d8b, #455a64);
        color: white;
        box-shadow: 0 0 15px rgba(96, 125, 139, 0.4);
    }

    .raw-output-display, .stderr-output-display {
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(220, 53, 69, 0.3);
        border-radius: 6px;
        padding: 12px;
        margin-top: 8px;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.9);
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 200px;
        overflow-y: auto;
    }

    .stderr-output-display {
        border-color: rgba(255, 152, 0, 0.3);
        background: rgba(255, 152, 0, 0.05);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .error-container {
            padding: 15px;
        }

        .error-title {
            font-size: 2rem;
        }

        .error-icon {
            font-size: 3rem;
        }

        .btn-error, .btn-primary {
            margin: 5px;
            padding: 10px 20px;
        }

        .error-type-badge {
            font-size: 0.8rem;
            padding: 4px 8px;
        }

        .raw-output-display, .stderr-output-display {
            font-size: 0.8rem;
            max-height: 150px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="error-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-nav">
        <a href="{% url 'battles:battle_list' %}" class="nav-link">
            <i class="fas fa-arrow-left"></i> 返回对战列表
        </a>
        <span class="breadcrumb-separator">|</span>
        <div class="current-page">
            <i class="fas fa-exclamation-triangle"></i>
            <span>战斗错误 #{{ battle.id }}</span>
        </div>
    </div>

    <!-- 错误头部 -->
    <div class="error-header">
        <div class="error-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h1 class="error-title">战斗执行失败</h1>
        <p class="error-subtitle">对战 #{{ battle.id }} 在执行过程中遇到了错误</p>
        <div class="status-badge">
            <i class="fas fa-times-circle"></i> 错误状态
        </div>
    </div>

    <!-- 战斗基本信息 -->
    <div class="error-details">
        <div class="error-section">
            <h4><i class="fas fa-info-circle"></i> 战斗信息</h4>
            <div class="battle-info">
                <div class="info-row">
                    <span class="info-label">战斗ID</span>
                    <span class="info-value">#{{ battle.id }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">战斗类型</span>
                    <span class="info-value">{{ battle.get_battle_type_display }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">玩家1</span>
                    <span class="info-value">{{ battle.player1.username }} ({{ battle.player1_code.title }})</span>
                </div>
                <div class="info-row">
                    <span class="info-label">玩家2</span>
                    <span class="info-value">{{ battle.player2.username }} ({{ battle.player2_code.title }})</span>
                </div>
                <div class="info-row">
                    <span class="info-label">创建时间</span>
                    <span class="info-value">{{ battle.created_at|date:"Y-m-d H:i:s" }}</span>
                </div>
                {% if battle.started_at %}
                <div class="info-row">
                    <span class="info-label">开始时间</span>
                    <span class="info-value">{{ battle.started_at|date:"Y-m-d H:i:s" }}</span>
                </div>
                {% endif %}
                {% if battle.finished_at %}
                <div class="info-row">
                    <span class="info-label">结束时间</span>
                    <span class="info-value">{{ battle.finished_at|date:"Y-m-d H:i:s" }}</span>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 错误详情 -->
        <div class="error-section">
            <h4><i class="fas fa-bug"></i> 错误详情</h4>
            <div class="error-content">
                {% if battle.error_message %}
{{ battle.error_message }}
                {% else %}
战斗执行过程中发生了未知错误，请查看详细日志获取更多信息。
                {% endif %}
            </div>
        </div>

        <!-- 技术详情 -->
        {% if battle.map_config.error_info %}
        <div class="error-section">
            <h4><i class="fas fa-code"></i> 技术详情</h4>
            {% with error_info=battle.map_config.error_info %}
            <div class="error-content">
                <div class="error-detail-item">
                    <strong>错误类型：</strong>
                    <span class="error-type-badge error-type-{{ error_info.error_type }}">
                        {% if error_info.error_type == 'timeout' %}
                            <i class="fas fa-clock"></i> 执行超时
                        {% elif error_info.error_type == 'syntax_error' %}
                            <i class="fas fa-exclamation-triangle"></i> 语法错误
                        {% elif error_info.error_type == 'runtime_error' %}
                            <i class="fas fa-bug"></i> 运行时错误
                        {% elif error_info.error_type == 'output_format_error' %}
                            <i class="fas fa-file-code"></i> 输出格式错误
                        {% elif error_info.error_type == 'command_format_error' %}
                            <i class="fas fa-list"></i> 命令格式错误
                        {% elif error_info.error_type == 'compilation_error' %}
                            <i class="fas fa-cogs"></i> 编译错误
                        {% elif error_info.error_type == 'import_error' %}
                            <i class="fas fa-puzzle-piece"></i> 模块导入错误
                        {% elif error_info.error_type == 'memory_error' %}
                            <i class="fas fa-memory"></i> 内存错误
                        {% elif error_info.error_type == 'permission_error' %}
                            <i class="fas fa-lock"></i> 权限错误
                        {% else %}
                            <i class="fas fa-question"></i> 未知错误
                        {% endif %}
                    </span>
                </div>

                {% if error_info.failed_round %}
                <div class="error-detail-item">
                    <strong>失败回合：</strong> 第 {{ error_info.failed_round }} 回合
                </div>
                {% endif %}

                {% if error_info.error_details.language %}
                <div class="error-detail-item">
                    <strong>编程语言：</strong> {{ error_info.error_details.language|title }}
                </div>
                {% endif %}

                {% if error_info.error_details.timeout_seconds %}
                <div class="error-detail-item">
                    <strong>超时限制：</strong> {{ error_info.error_details.timeout_seconds }} 秒
                </div>
                {% endif %}

                {% if error_info.error_details.exception_message %}
                <div class="error-detail-item">
                    <strong>异常：</strong> {{ error_info.error_details.exception_message }}
                </div>
                {% endif %}

                {% if error_info.error_details.exception_stack %}
                <div class="error-detail-item">
                    <strong>异常堆栈：</strong> {{ error_info.error_details.exception_stack }}
                </div>
                {% endif %}

                {% if error_info.error_details.stdout_snippet %}
                <div class="error-detail-item">
                    <strong>原始输出：</strong>
                    <div class="raw-output-display">
                        {{ error_info.error_details.stdout_snippet }}
                    </div>
                </div>
                {% endif %}

                {% if error_info.error_details.stderr_snippet %}
                <div class="error-detail-item">
                    <strong>错误输出：</strong>
                    <div class="stderr-output-display">
                        {{ error_info.error_details.stderr_snippet }}
                    </div>
                </div>
                {% endif %}

                <div class="error-detail-item">
                    <strong>发生时间：</strong> {{ error_info.error_time|date:"Y-m-d H:i:s" }}
                </div>
            </div>
            {% endwith %}
        </div>
        {% endif %}

        <!-- 系统信息 -->
        {% if battle.system_info %}
        <div class="error-section">
            <h4><i class="fas fa-server"></i> 系统信息</h4>
            <div class="error-content">
{{ battle.system_info }}
            </div>
        </div>
        {% endif %}
    </div>

    <!-- 操作按钮 -->
    <div class="actions-section">
        <h4 style="margin-bottom: 20px; color: rgba(255, 255, 255, 0.9);">可用操作</h4>
        <div>
            <a href="{% url 'battles:api_battle_log_download' battle.id %}" class="btn-error">
                <i class="fas fa-download"></i> 下载详细日志
            </a>
            <a href="{% url 'battles:api_battle_report_download' battle.id %}" class="btn-error">
                <i class="fas fa-file-alt"></i> 下载错误报告
            </a>
            {% if not user.is_staff %}
                {% if battle_creation_enabled %}
                    <a href="{% url 'battles:battle_create' %}" class="btn-primary">
                        <i class="fas fa-plus"></i> 创建新对战
                    </a>
                {% else %}
                    <button class="btn-primary disabled" onclick="showFeatureDisabledAlert()" title="点击查看详情">
                        <i class="fas fa-plus"></i> 创建新对战
                    </button>
                {% endif %}
            {% endif %}
            <a href="{% url 'battles:battle_list' %}" class="btn-primary">
                <i class="fas fa-list"></i> 返回对战列表
            </a>
        </div>
        <div style="margin-top: 20px; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem;">
            <i class="fas fa-info-circle"></i>
            如果问题持续出现，请联系管理员并提供错误日志
        </div>
    </div>
</div>

<script>
    // 显示功能禁用提示
    function showFeatureDisabledAlert() {
        alert('创建对战功能已被管理员暂时关闭。\n\n如有疑问，请联系系统管理员。');
    }
</script>
{% endblock %}